<template>
    <div class="real-time-hidden-dangers-page" style="display:flex">
        <div class="org-choose-wrap">
            <!-- 单位筛选框 -->
            <el-select v-model="orgIds" filterable slot="prepend" placeholder="所有单位" @change="getAllData()">
                <el-option v-if="isMuilUnitUser" label="所有单位" :value="$store.state.userInfo.organizationIds"></el-option>
                <el-option v-for="item in orgList" :label="item.orgName" :value="item.orgId.toString()" :key="item.orgId"></el-option>
            </el-select>
        </div>
        <div class="hidden_dangers_left">
            <div id="hidden_dangers_left_top" class="hidden_dangers_left_top"></div>
            <div id="hidden_dangers_left_bottom" class="hidden_dangers_left_bottom">
            </div>
        </div>
        <div class="hidden_dangers_zhongjian unit-list-wrap" style="margin-top:0;">
            <ul class="unit-list" v-infinite-scroll="getList" infinite-scroll-disabled="isOver" infinite-scroll-distance="10">
                <template>
                    <li v-for="(item, index) in getHiddenDangerListInfo" :key="index">
                        <div class="unit-item hidden-bg" :class="{'active': showType==item.id}" @click="showType=item.id,intData()" style="width:380px;height:390px;">
                            <div class="hidden_dangers_status hidden_dangers_status_zheng" v-show="item.status == 1">整改中</div>
                            <div class="hidden_dangers_status hidden_dangers_status_done" v-show="item.status == 2">已完成</div>
                            <div class="hidden_dangers_status hidden_dangers_status_going" v-show="item.status == 3">核实中</div>
                            <div class="hidden_dangers_status hidden_dangers_status_nostart" v-show="item.status == 5">待指派</div>
                            <div class="hidden_dangers_top_image" @click="getImgVideoDetail({item:item.picUrls.split(',')[0],orgName:item.orgName,categoryName:item.categoryName,gradeName:item.gradeName})">
                                <img v-if="item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 3) == 'png' || item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 4) == 'jpeg' || item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 3) == 'gif' || item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 3) == 'jpg' || item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 3) == 'bmp' || item.picUrls.split(',')[0].substr(item.picUrls.split(',')[0].length - 3) == 'pic'" :src="item.picUrls.split(',')[0]" alt="" class="hidden-danger-img">
                                <img v-else src="../../../../../assets/images/videoImgDetail/video_img_detail.png" alt="">
                            </div>
                            <div class="hidden_dangers_contant">
                                <div class="hidden_dangers_desc">
                                    <p>
                                        <span>{{item.orgName}}</span>
                                        <span style="margin-left:10px">{{item.categoryName}}</span>
                                        <span style="margin-left:10px">{{item.gradeName}}</span>
                                    </p>
                                    <el-tooltip effect="dark" :content="item.hiddenDangerDesc">
                                        <p style="max-height: 40px;">{{item.hiddenDangerDesc}}</p>
                                    </el-tooltip>
                                </div>
                                <div class="hidden_dangers_touxiang" style="border:2px solid #6B93C2">
                                    <img class="" :src="item.headUrl || defaultUserHead" alt="">
                                </div>
                            </div> 
                            <div class="hidden_dangers_voice" style="margin-top:10px;">
                                <template>
                                    <p v-if="item.hiddenDangerVoice != ''" :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.hiddenDangerVoice)">
                                        <audio :src="item.hiddenDangerVoice" id="media" width="1" height="1" preload></audio>
                                        <span id="audio_area" class="db audio_area">
                                            <div class="audio_wrp db">
                                                <span class="audio_play_area">
                                                    <i class="icon_audio_default"></i>
                                                    <i class="icon_audio_playing"></i>
                                                </span>
                                                <span id="audio_length" class="audio_length tips_global"></span>
                                                <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                            </div>
                                        </span>
                                    </p>
                                    <!-- <p v-else>暂无录音</p> -->
                                </template>
                            </div>
                        </div>   
                    </li>
                </template>
            </ul>
            <!-- 暂无数据 -->
            <div class="no-data" v-if="isOver && getHiddenDangerListInfo.length == 0"></div>
        </div>
        <div class="hidden_dangers_right">
            <h3>隐患整改时间线</h3>
            <el-timeline v-show="getHiddenDangerInfo.createAccountName">
                <template v-for="(item,index) in getHiddenDangerInfo.details">
                     <!-- 指派 -->
                    <el-timeline-item v-if="item.type==3" :key="item.id" :timestamp="String(item.updateTime).substr(5,11)" placement="top" class="dangers_time_pai">
                        <el-card>
                        <p class="danger_hidden_people">由{{ getHiddenDangerInfo.managerPersonName || getHiddenDangerInfo.createAccountName }}指派{{ getHiddenDangerInfo.chargePersonName  }}为责任人</p>
                        </el-card>
                    </el-timeline-item>
                    <template v-else-if="item.type == 1">
                        <el-timeline-item v-if="getHiddenDangerInfo.status == 2 && index == 0" :key="item.id" :timestamp="String(item.updateTime).substr(5,11)" placement="top" class="dangers_time_done">
                            <el-card>
                              <div v-if="item.picUrls">
                                <img v-for="(obj, i) in item.picUrls.split(',')" :key="obj" :data-imgpreview="item.picUrls" :data-imgpreviewindex="i" class="imgContainer-edit" style="margin: 10px 0px;" :src="obj"  alt="隐患图片" width="100px" height="100px"/>
                              </div>
                              <!-- 录音 -->
                              <p v-if="item.detailVoiceUrl != ''" :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                                  <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                                  <span id="audio_area" class="db audio_area">
                                      <div class="audio_wrp db">
                                          <span class="audio_play_area">
                                              <i class="icon_audio_default"></i>
                                              <i class="icon_audio_playing"></i>
                                          </span>
                                          <span id="audio_length" class="audio_length tips_global"></span>
                                          <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                      </div>
                                  </span>
                              </p>
                              <p>核实描述：{{item.detailDesc}}</p>
                              <p class="danger_hidden_people">由{{ item.createAccountName }}核实通过</p>
                            </el-card>
                        </el-timeline-item>
                        <!-- 整改 -->
                        <el-timeline-item v-else :key="item.id" :timestamp="String(item.updateTime).substr(5,11)" placement="top" class="dangers_time_zheng">
                            <el-card>
                                <template v-if="item.isStopSystem == 1">
                                <el-tag class="danger_hidden_timestop" type="warning">停用系统</el-tag>
                                <p>开始停用时间：{{item.stopStartTime}}</p>
                                <p>结束停用时间：{{item.stopEndTime}}</p>
                                <p>安全措施：{{item.safetyMethod}}</p>
                                </template>
                                <el-tag class="danger_hidden_timestop" style="background-color:#67B692" v-else>不停用系统</el-tag>
                                <div v-if="item.picUrls">
                                <img v-for="(obj, i) in item.picUrls.split(',')" :key="obj" :data-imgpreview="item.picUrls" :data-imgpreviewindex="i" class="imgContainer-edit" style="margin: 10px 0xp;" :src="obj"  alt="隐患图片" width="100px" height="100px"/>
                                </div>
                                <span style="color:white;font-size:14px;">整改描述：{{item.detailDesc}}</span>
                                <!-- 录音 -->
                                <span style="color:#5EB8F7;font-size:14px;" class="position:absolute" v-if="item.detailVoiceUrl != ''" :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                                <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                                语音
                                </span>
                                <p class="danger_hidden_people">由{{item.createAccountName}}整改</p>
                            </el-card>
                        </el-timeline-item>
                    </template>
                    <!-- 驳回 -->
                    <el-timeline-item v-else :key="item.id" :timestamp="String(item.updateTime).substr(5,11)" placement="top" class="dangers_time_bo"> 
                        <el-card>
                        <div v-if="item.picUrls">
                            <img class="imgContainer-edit" style="margin: 10px 0px;" v-for="(obj, i) in item.picUrls.split(',')" :key="obj"  :data-imgpreview="item.picUrls" :data-imgpreviewindex="i" :src="obj||GLOBAL.defaultImg"  alt="隐患图片" width="100px" height="100px"/>
                        </div>
                        <span style="color:white;font-size:14px;">整改描述：{{item.detailDesc}}</span>
                        <!-- 录音 -->
                        <span style="color:#5EB8F7;font-size:14px;" class="position:absolute" v-if="item.detailVoiceUrl != ''" :class="'weixinAudio_'+item.id" @click="playAudio(item.id, item.detailVoiceUrl)">
                        <audio :src="item.detailVoiceUrl" id="media" width="1" height="1" preload></audio>
                        语音
                        </span>
                        <p class="danger_hidden_people">由{{item.createAccountName}}驳回</p>
                        </el-card>
                    </el-timeline-item>    
                    
                </template>
                
                <el-timeline-item :timestamp="String(getHiddenDangerInfo.createTime).substr(5,11)" placement="top" class="dangers_time_chuan">
                    <el-card>
                        <p class="danger_hidden_people">由{{ getHiddenDangerInfo.createAccountName }}创建</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
            <div class="danger_hidden_moreInfo" v-show="getHiddenDangerInfo.createAccountName">
                <div class="danger_hidden_moreInfo_title" style="width: 120px;float:left">
                    <p>责 任 人：</p>
                    <p>核 实 人：</p>
                    <p>隐患位置：</p>
                    <p>相关资产：</p>
                    <p>相关物联设备：</p>
                    <p>所属消防系统：</p>
                    <p>整改期限：</p>
                </div>
                <div class="danger_hidden_moreInfo_value">
                    <p>{{ getHiddenDangerInfo.chargePersonName || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.managerPersonName || getHiddenDangerInfo.createAccountName || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.addrDesc || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.relateAssetsNames || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.relateFcfNames || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.systemName || '-' }}</p>
                    <p>{{ getHiddenDangerInfo.endTime || '-' }}</p>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="30vw" class="hereby-certify" append-to-body :title="videoImgArr.orgName + ' ' + videoImgArr.categoryName + ' ' + videoImgArr.gradeName">
            <videoImgDetail ref="mychild" :videoImgArr='videoImgArr' style="width:100%;"></videoImgDetail>
        </el-dialog>
    </div>
</template>
<script>
import '@/libs/weixinAudio'
import {getRealImportQuestion} from '@/api/record'
import { getOrgsStatusList } from '@/api/organization'
import {getHiddenManagerStatistics,getHiddenGradeNumByStatus,getHiddenTimeAccumulate,getHiddenDangerList,getHiddenDanger } from '@/api/dangers'
import videoImgDetail from '@/components/DialogCards/videoImgDetail/main'

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
    data() {
        return {
            orgIds: this.transOrg.toString() || '',
            showType:0,
            pageIndex: -1,
            pageSize:20,
            isOver:false,
            getHiddenDangersStatus:{},
            getHiddenDangersStatusdengji:{},
            getHiddenDangerListInfo:[],
            getHiddenDangerInfo:{},
            defaultUserHead: require('../../../../../assets/images/default/userHead.png'), 
            audioList: {},// audio集合
            isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser,//0:单单位用户;1:多单位用户
            dialogVisible: false, // 弹窗
            videoImgArr: {},
        }
    },
    computed:{
        orgList(){
            return this.$store.state.orgList
        }
    },
    watch:{
        dialogVisible(newVal){
            if(!newVal){
                this.$refs.mychild.stopVideo()
            }
        }
    },
    components:{
        videoImgDetail
    },
    props: {
        transOrg:{
            required: true
        },
        transId:{
            required: true
        },
    },
    created() {
       
    },
    mounted(){
        this.getHiddenGradeNumByStatus();
    },
    methods: {
        intData(){
            let that = this;
            this.getHiddenDangersTimeliem(that.showType);
        },
        // 查询条件改变，重新获取数据
        getAllData() {
            this.getHiddenGradeNumByStatus();
            this.getList(0);
        },
        //获取整改时间线
        getHiddenDangersTimeliem(id){
            let that = this;
            let _parame = {
                id:id
            }
            getHiddenDanger(_parame).then(res=>{
                if(res.status==200){
                    that.getHiddenDangerInfo=res.data
                }
            })    
        },
        //获取隐患清单详细信息
        getList(pageIndex){
            let that = this;
            that.$Ctl.loading(1,10000)
            if(typeof(pageIndex) != 'undefined') {
                that.pageIndex = pageIndex
            } else {
                that.pageIndex += 1
            }
            let _parame = {
                orgIds:that.orgIds,
                queryType: 1,
                status:4,
                pageIndex:that.pageIndex,
                pageSize:that.pageSize,
            }
            getHiddenDangerList(_parame).then(res=>{
                if(res.status==200){
                    //that.getHiddenDangerListInfo=res.data
                    if(typeof(pageIndex) != 'undefined' && that.pageIndex === 0) {
                        that.isOver = false
                        // 重新查询
                        that.getHiddenDangerListInfo=res.data
                    } else {
                        that.getHiddenDangerListInfo.push.apply(that.getHiddenDangerListInfo, res.data)
                    }

                    // 最后一页停止滚动加载
                    if(res.data.length < that.pageSize) {
                        that.isOver = true
                    } else {
                        that.isOver = false
                    }
                    if(that.getHiddenDangerListInfo && that.getHiddenDangerListInfo.length>0){
                        if(that.transId){
                            that.showType = that.transId;
                        }else{
                            that.showType = that.getHiddenDangerListInfo[0].id;
                        }
                        that.getHiddenDangersTimeliem(that.showType);
                    }
                }
                that.$Ctl.loading(0)
            })
        },
        //获取等级和类型的隐患数量
        getHiddenGradeNumByStatus(){
            let that = this;
            
            let parames2 = {
                orgIds:that.orgIds,
                type: 1,
                status:4,
                timeQuantum: 3,
            }
            let parames1 = {
                orgIds:that.orgIds,
                type: 2,
                status:4,
                timeQuantum: 3,
            }
            //类型
            getHiddenGradeNumByStatus(parames2).then(res=>{
                if(res.status==200){
                    that.getHiddenDangersStatus=res.data
                }
                that.initHiddenDangerstype(that.getHiddenDangersStatus);
                
            })
            //等级
            getHiddenGradeNumByStatus(parames1).then(res=>{
                if(res.status==200){
                    that.getHiddenDangersStatusdengji=res.data
                }
                that.initHiddenDangersdengji(that.getHiddenDangersStatusdengji);
            })
        },
        // 查看视频图片详情
        getImgVideoDetail(item){
            let that = this
            that.videoImgArr = item
            that.dialogVisible = true
        },
        // 播放录音
        playAudio (id,hiddenDangerVoice){
            let that = this
            // 停止其他的音频播放
            for(let key in that.audioList) {
                if(key != ('weixinAudio_'+id)) {
                that.audioList[key].weixinAudio0.stop()
                }
            }
            if(!that.audioList['weixinAudio_'+id]) {
                if(hiddenDangerVoice!=null&&hiddenDangerVoice!=""&&hiddenDangerVoice!=undefined){
                that.audioList['weixinAudio_'+id] = $('.weixinAudio_'+id).weixinAudio({
                    autoplay: false,
                    src: hiddenDangerVoice,
                })
                }else{
                // that.$message({
                //     type: 'warning',
                //     message: '暂时没有录入语音！'
                // })
                }
            }
        },
        initHiddenDangerstype(getHiddenDangersStatus){
            let myChart = Echarts.init(document.getElementById("hidden_dangers_left_top"));
            let count = [{value:'',name:''},{value:'',name:''},{value:'',name:''},{value:'',name:''},{value:'',name:''},{value:'',name:''}];//各类型总数
            let type = [];
            let colorList=['#2CB58D', '#E78B3C', '#E95299', '#5388F4', '#75C0F6', '#D9BA4F'];
            for(let i = 0;i<getHiddenDangersStatus.length;i++){
                count[i].value=getHiddenDangersStatus[i].count;
                count[i].name=getHiddenDangersStatus[i].categoryName;
                type[i]=getHiddenDangersStatus[i].categoryName;
            }
            let option = {
                title: {
                    text: '隐患类型分布',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize:25,
                        fontWeight:'normal',
                        color: ['#4699ff']
                    },
                },
                legend: {
                    orient: 'horizontal',
                    y: 'bottom',
                    itemGap:30,
                    itemWidth:15,
                    textStyle: {
                        color:'#A3BEDD'
                    },
                    data:type
                },
                tooltip: {
                    trigger: 'item',
                },
                series: [
                    {
                        type:'pie',
                        radius: ['45%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:count
                    },
                    {
                        type: 'pie',
                        color:'#5F94C6',
                        hoverAnimation: false,
                        radius: ['62%', '63%'],
                        label: {
                            show: false
                        },
                        data: [
                            {
                                value: 0,
                                name: '其他'
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        },
        initHiddenDangersdengji(getHiddenDangersStatusdengji){
            let myChart = Echarts.init(document.getElementById("hidden_dangers_left_bottom"));
            let count = [{value:'',name:''},{value:'',name:''},{value:'',name:''},{value:'',name:''}];//各类型总数
            let type = [];
            for(let i = 0;i<getHiddenDangersStatusdengji.length;i++){
                count[i].value=getHiddenDangersStatusdengji[i].count;
                count[i].name=getHiddenDangersStatusdengji[i].gradeName;
                type[i]=getHiddenDangersStatusdengji[i].gradeName;
            }
            let colorList=['#1E7FEE', '#DAD867', '#FFA414', '#ED3368'];
            let option = {
                title: {
                    text: '隐患等级分布',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize:25,
                        fontWeight:'normal',
                        color: ['#4699ff']
                    },
                },
                legend: {
                    orient: 'horizontal',
                    y: 'bottom',
                    itemGap:30,
                    itemWidth:15,
                    textStyle: {
                        color:'#A3BEDD'
                    },
                    data:type
                },
                tooltip: {
                    trigger: 'item',
                },
                series: [
                    {
                        type:'pie',
                        radius: ['45%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:count
                    },
                    {
                        type: 'pie',
                        color:'#5F94C6',
                        hoverAnimation: false,
                        radius: ['62%', '63%'],
                        label: {
                            show: false
                        },
                        data: [
                            {
                                value: 0,
                                name: '其他'
                            }
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        },    
    },
}
</script>
<style lang="scss" scoped>
.real-time-hidden-dangers-page{
    width: 100%;
    height: 100%;
    .hidden_dangers_left{
        width: 24%;
        height: 100%;
        border: 1px solid #5EB8F7;
        background: url(../../../../../assets/images/detailPage/bg-item.png);
        .hidden_dangers_left_top{
            width: 100%;
            height: 50%;
            overflow: hidden;
        }
        .hidden_dangers_left_bottom{
            width: 100%;
            height: 50%;
            overflow: hidden;       
        }
    }
    .hidden_dangers_zhongjian{
        width: 50%;
        height: 100%;
        border: 1px solid #5EB8F7;
        margin-left: 15px;
        display: flex;
        flex-wrap: wrap;
        .hidden-bg{
            background: url(../../../../../assets/images/detailPage/hidden-bg.png) center center no-repeat;
            background-size:100% 100%; 
            cursor: pointer;
        }
        .active {
            background: url(../../../../../assets/images/detailPage/hidden-click-bg.png) center center no-repeat;
            background-size:100% 100%; 
        }
        .hidden_dangers_top_image{
            width: 330px;
            height: 200px;
            text-align: center;
            .hidden-danger-img {
                object-fit: cover;
                width: 100%;
                height: 100%;
                padding: 1px;
            }
        }
        .hidden_dangers_status{
            width: 50px;
            height: 25px;
            position: absolute;
            font-size: 9px;
            border-radius: 3px;
            text-align: center;
            line-height: 25px;
            margin-left: 5px;
            margin-top: 5px;
            color: white;
        }
        .hidden_dangers_status_zheng{
            background-color: #DC8936;
        }
        .hidden_dangers_status_done{
            background-color: #67B692;
        }
        .hidden_dangers_status_going{
            background-color: #09A3CA;
        }
        .hidden_dangers_status_nostart{
            background-color: #2F77CC;
        }
        .hidden_dangers_contant{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            
            p{
                width: 250px;
                color: #FFFFFF;
                font-size: 14px;
                margin-top: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp:2;
                word-break:break-all;
                //display:-webkit-box;
                -webkit-box-orient:vertical;
                span{
                    color: #A3BEDD;
                    font-size: 14px;
                }
            }
            .hidden_dangers_touxiang{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }
    .hidden_dangers_right{
        width: 24%;
        height: 100%;
        border: 1px solid #5EB8F7;
        margin-left: 15px;
        background: url(../../../../../assets/images/detailPage/bg-item.png);
        overflow:auto;
        h3{
            color: #5EB8F7;
            font-size: 25px;
            margin-top: 11px;
            margin-left: 11px;
        }
    }
    .unit-list li{
        min-width: 415px;
    }
}
</style>
<style lang="scss">
.real-time-hidden-dangers-page{
    .hidden_dangers_right{
        .el-timeline{
            margin-left: 100px;
            margin-top: 20px;
            font-size: 16px;
           .el-timeline-item__timestamp.is-bottom{
               position: absolute;
               margin-left: -100px;
               margin-top: -16px;
           }
           .el-icon-more:before{
               content:"整";
           }
        }
    }
    .org-choose-wrap {
        position: absolute;
        margin-top: -65px;
        margin-left: 710px;
        .el-select {
            .el-input__inner {
                border: none;
                font-size: 16px;
                color: rgba(96,194,255,.4);
                background:rgba(70,153,255,.1);
            }
        }
    }
    .audio_area {
        display: inline-block;
        width: 280px;
        vertical-align: top;
        margin: 0px 1px 0px 0;
        font-size: 0;
        position: relative;
        font-weight: 400;
        text-decoration: none;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        background: url(../../../../../assets/images/detailPage/audio-bg.png) 0px center no-repeat;
        background-size: contain;
        cursor: pointer;
    }

    .audio_wrp {
        position: relative;
        //border: 1px solid white;
        // background-color: #5c90d2; 
        border-radius:5px;
        overflow: hidden;
        padding: 0 10px;
    }

    .audio_play_area {
        float: left;
        margin: 9px 10px 10px 5px;
        font-size: 0;
        width: 18px;
        height: 20px;
    }

    .playing .audio_play_area .icon_audio_default {
        display: none;
    }

    .playing .audio_play_area .icon_audio_playing {
        display: inline-block;
    }

    .audio_play_area .icon_audio_default {
        background: transparent url(../../../../../assets/images/default/iconloop.png) no-repeat 0 0;
        width: 18px;
        height: 16px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 18px;
        background-size: 54px 18px;
        background-position: -36px center;
    }

    .audio_play_area .icon_audio_playing {
        background: transparent url(../../../../../assets/images/default/iconloop.png) no-repeat 0 0;
        width: 18px;
        height: 16px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 18px;
        background-size: 54px 18px;
        -webkit-animation: audio_playing 1s infinite;
        background-position: 0px center;
        display: none;
    }

    .tips_global {
        color: white;
    }

    .audio_area .audio_length {
        float: right;
        font-size: 14px;
        margin-top: 8px;
        margin-left: 1em;
    }

    .audio_area .progress_bar {
        position: absolute;
        left: 12px;
        bottom: 0;
        background-color: white;
        height: 2px;
    }

    //时间线
    .el-timeline-item__timestamp{
        margin-top: -5px;
        margin-left: -120px;
    }
    .el-card{
        border: 0px solid white;
    }
    .el-timeline{
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .el-timeline-item__content{
        margin-top: -23px;
        margin-left: -17px;
    }
    .el-card{
        background-color: transparent;
        .el-card__body{
            margin-top: -20px;
            img{
                margin: 10px;
            }
        }
        p{
            color: white;
        }
    }
    .danger_hidden_people{
        color: #A3BEDD !important;
        font-size: 9px;
    }
    .danger_hidden_timestop{
        width: 80px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #EA983E;
        color: black;
        border: transparent;
    }
    .el-timeline-item__tail{
        border-left: 1px solid #598093 !important;
        left: 5px;
    }
    .el-timeline-item__node--normal{
        height: 22px;
        width: 22px;
        left: -5px;
        background-color: #252F3F;
        margin-top: -3px;
    }
    .dangers_time_zheng {
        .el-timeline-item__node {
            text-align: center;
            border: 1px solid #DC8936;
            color: #DC8936;
            &::before {
                content: '整';
                width: 100%;
                height: 100%;
            }
        }
    }
    .dangers_time_chuan{
        .el-timeline-item__node {
            text-align: center;
            border: 1px solid #2F77CC;
            color: #2F77CC;
            &::before {
                content: '建';
                width: 100%;
                height: 100%;
            }
        }
    }
    .dangers_time_bo{
        .el-timeline-item__node {
            text-align: center;
            border: 1px solid #2F77CC;
            color: #2F77CC;
            &::before {
                content: '驳';
                width: 100%;
                height: 100%;
            }
        }       
    }
    .dangers_time_done{
        .el-timeline-item__node {
            text-align: center;
            border: 1px solid #53C290;
            color: #53C290;
            &::before {
                content: '√';
                width: 100%;
                height: 100%;
            }
        }  
    }
    .dangers_time_pai{
        .el-timeline-item__node {
            text-align: center;
            border: 1px solid #2F77CC;
            color: #2F77CC;
            &::before {
                content: '派';
                width: 100%;
                height: 100%;
            }
        }  
    }
    .danger_hidden_moreInfo{
        .danger_hidden_moreInfo_title{
            p{
                color: #A3BEDD;
                float: right; 
                padding: 5px;
            }
        }
        .danger_hidden_moreInfo_value{
            p{
                color: white;
                padding: 5px;
            }
        }
    }
}
</style>
